<template>
    <!-- <el-card>
        <div class="selectBox">
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in 10" :key="item" :label="item" :value="item">{{ item }}</el-option>
            </el-select>
        </div>
        <div class="echartsBox">
            <div class="echartsList" style="width: 694px">
                <div class="echartsListHeader">项目燃尽图</div>
                <elEcharts id="echarts1"></elEcharts>
            </div>
            <div class="echartsList">
                <div class="echartsListHeader">任务整体汇总</div>
                <elEcharts id="echarts2" type="pie" tooltip="item"></elEcharts>
            </div>
            <div class="echartsList">
                <div class="echartsListHeader">贡献度</div>
                <elEcharts id="echarts3" type="radar" tooltip="item"></elEcharts>
            </div>
        </div>
        <div class="selectBox">
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in 10" :key="item" :label="item" :value="item">{{ item }}</el-option>
            </el-select>
        </div>
        <div class="echartsBox">
            <div class="echartsList">
                <div class="echartsListHeader">项目燃尽图</div>
                <elEcharts id="echarts4" :pile="true"></elEcharts>
            </div>
            <div class="echartsList">
                <div class="echartsListHeader">绩效条形</div>
                <elEcharts id="echarts5" type="bar" barDirection="crosswise"></elEcharts>
            </div>
        </div>
    </el-card> -->
    <div>
        <div class="selectBox">
            <el-select v-model="projectValue" placeholder="请选择">
                <el-option v-for="item in project" :key="item.projectId" :label="item.projectName" :value="item.projectId">{{ item.projectName }}</el-option>
            </el-select>
        </div>
        <div class="echartsBox" v-if="project.length > 0">
            <div class="echartsList">
                <div class="echartsListHeader">项目燃尽图</div>
                <elEcharts
                    id="echarts1"
                    v-if="echarts1.length > 0"
                    :key="projectKey"
                    :optionData="echarts1"
                    :showName="[
                        { name: '项目数量', fields: 'actualNums' },
                        { name: '已完成数', fields: 'expectNums' }
                    ]"
                ></elEcharts>
            </div>
            <div class="echartsList">
                <div class="echartsListHeader">任务整体汇总</div>
                <elEcharts
                    id="echarts2"
                    type="pie"
                    tooltip="item"
                    v-if="echarts2"
                    :key="projectKey"
                    :optionData1="echarts2"
                    :showName="[
                        { name: '临期任务', fields: 'temporaryTasks' },
                        { name: '逾期任务', fields: 'overdueTasks' },
                        { name: '未完成任务', fields: 'outstandingTasks' },
                        { name: '已完成任务', fields: 'finishTasks' }
                    ]"
                ></elEcharts>
            </div>
            <div class="echartsList">
                <div class="echartsListHeader">贡献度</div>
                <elEcharts id="echarts3" type="radar" tooltip="item" v-if="echarts3" :optionData1="echarts3" :key="projectKey"></elEcharts>
            </div>
        </div>
        <el-empty v-else description="暂无项目"></el-empty>
        <div class="selectBox">
            <el-select v-model="userValue" placeholder="请选择">
                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
            </el-select>
        </div>
        <div class="echartsBox">
            <div class="echartsList">
                <div class="echartsListHeader">任务燃尽图</div>
                <elEcharts
                    id="echarts4"
                    :pile="true"
                    :key="userKey"
                    v-if="echarts4.length > 0"
                    :optionData="echarts4"
                    xAxisText="month"
                    :showName="[
                        { name: '任务数量', fields: 'actualNums' },
                        { name: '已完成数', fields: 'expectNums' }
                    ]"
                ></elEcharts>
            </div>
            <div class="echartsList">
                <div class="echartsListHeader">绩效条形</div>
                <elEcharts
                    id="echarts5"
                    :key="userKey"
                    type="bar"
                    barDirection="crosswise"
                    v-if="echarts5"
                    :optionData1="echarts5"
                    :showName="[
                        { name: 'BUG数', fields: 'bugNums' },
                        { name: '延期数', fields: 'overdueTasks' },
                        { name: '完成数', fields: 'finishTasks' }
                    ]"
                ></elEcharts>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import elEcharts from './components/echarts.vue'
export default {
    components: {
        elEcharts
    },
    data() {
        return {
            userValue: '',
            projectValue: '',
            pageNum: 1,
            project: [],
            userList: [],
            echarts1: [],
            echarts2: '',
            echarts3: '',
            echarts4: [],
            echarts5: '',
            userKey: new Date().getTime(),
            projectKey: new Date().getTime()
        }
    },
    mounted() {
        // console.log(this.$refs.echarts1)
        // let dom: any = this.$refs.echarts1
        ;(this as any).getProjectList()
        ;(this as any).getUserList()
    },
    watch: {
        projectValue(data: boolean) {
            ;(this as any).getEcharts1Data()
            ;(this as any).getEcharts2Data()
            ;(this as any).getEcharts3Data()
            setTimeout(() => {
                ;(this as any).projectKey = new Date().getTime()
            }, 300)
        },
        userValue(data: boolean) {
            ;(this as any).getEcharts4Data()
            ;(this as any).getEcharts5Data()
            setTimeout(() => {
                ;(this as any).userKey = new Date().getTime()
            }, 300)
        }
    },
    methods: {
        // 获取项目列表
        getProjectList(): void {
            ;(this as any).$request.get('/api/oa/project/findProjectName').then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).project = res.data
                    if ((this as any).project.length > 0) {
                        ;(this as any).projectValue = (this as any).project[0].projectId
                    }
                }
            })
        },
        // 获取用户列表
        getUserList(): void {
            ;(this as any).$request.get('/api/oa/users/list').then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).userList = res.data
                    ;(this as any).userValue = (this as any).userList[0].id
                }
            })
        },
        // 项目燃尽图
        getEcharts1Data() {
            ;(this as any).$request.get('/api/oa/plan/findProjectBurnout', { projectId: (this as any).projectValue }).then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).echarts1 = res.data
                }
            })
        },
        // 任务整体汇总
        getEcharts2Data() {
            ;(this as any).$request.get('/api/oa/plan/findTaskStatus', { projectId: (this as any).projectValue }).then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).echarts2 = res.data
                    // console.log(res.data)
                }
            })
        },
        // 贡献度
        getEcharts3Data() {
            ;(this as any).$request.get('/api/oa/users/findContribution', { projectId: (this as any).projectValue }).then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).echarts3 = res.data
                }
            })
        },
        // 任务燃尽图
        getEcharts4Data() {
            ;(this as any).$request.get('/api/oa/plan/findPlanBurnout', { userId: (this as any).userValue }).then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).echarts4 = res.data
                }
            })
        },
        // 绩效条形图
        getEcharts5Data() {
            ;(this as any).$request.get('/api/oa/users/findAchievements', { userId: (this as any).userValue }).then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).echarts5 = res.data
                }
            })
        }
    }
}
</script>

<style scoped="scoped" lang="scss">
.selectBox {
    padding: 10px 0;
    margin-bottom: 10px;
}
.echartsBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    .echartsList {
        width: 50%;
        margin-left: 20px;
        background: #ffffff;
        padding: 20px;
        &:first-child {
            margin-left: 0;
        }
    }
    .echartsListHeader {
        width: 100%;
        line-height: 32px;
        // border-radius: 5px;
        // background: #eef1f6;
        text-align: center;
        border-bottom: 1px solid #e6e8ed;
        font-weight: 600;
    }
}
</style>
